<template>
	<div>
        <div class="login-box">
            <h2>订单管理服务平台</h2>
            <form>
                <div class="user-box">
                    <input type="text" v-model.trim="username" />
                    <label>用户名</label>
                </div>
                <div class="user-box">
                    <input
                        type="password"
                        v-model.trim="password"
                    />
                    <label>密码</label>
                </div>
				<el-row justify="center">
					<el-button size="large" style="width:300px" type="primary" @click="Loginin()" ><b>登录</b></el-button>
				</el-row>
            </form>
        </div>
    </div>
</template>

<script lang="ts">

import { ElTag, ElButton, ElRow, ElMessage } from "element-plus"
import { reactive, toRefs, onMounted } from "vue"
import { useRouter } from 'vue-router'
import UserStore from '../store/userstore' 
import axios from 'axios'

export default {
	name: "loginpage",
	components: {
		ElTag,
		ElButton,
		ElRow,
	},
	props: {
		msg: String,
	},
	setup(props: any) {
        const store = UserStore()
        const router = useRouter()
		const data = reactive({
			count: 0,
            username:'' as any,
            password:'' as any,
            userinfo:[] as any,
		});
        const methods = reactive({
            Loginin:(msg : any) => {
                let flag = false
                data.userinfo.forEach((item : any) => {
                    if(item.name === data.username && item.password === data.password){
                        router.push({
                            name:"index"
                        })
                        store.username = data.username
                        flag = true
                    }
                })
                if(!flag) return ElMessage.error('用户名或密码错误')
            }
        })
        onMounted(() => {
            axios.get('http://localhost:9000/userinfo').then((res) => {
                data.userinfo = res.data.data
            })
        })
		return {
			...toRefs(data),
            ...toRefs(methods),
		};
	},
};
</script>

<style>
    @import url(../assets/css/login.css);
</style>
